<template>
  <div>
    <!--sticky && header-->
    <sticky>
      <x-header :left-options="{showBack: false}">园区地图</x-header>
    </sticky>

    <selector :options='floor' v-model='floorNum' @on-change='change'></selector>

    <!--map-->
    <div id="map_container">
      <iframe :src="mapSrc" frameborder="0" width="100%" height="100%"></iframe>
    </div>
  </div>

</template>

<script>
  import {
    XHeader,
    Sticky,
    Selector
  } from 'vux'

  export default {
    components: {
      XHeader,
      Sticky,
      Selector
    },
    data() {
      return {
        mapSrc: 'http://www.cloudlinker.cn/hz-park/map/map-park',
        floor: [
          {key: 'yq', value: '园区'},
          {key: '1-1', value: '1号楼1F'},
          {key: '1-2', value: '1号楼2F'},
          {key: '2', value: '2号楼'},
          {key: '3', value: '3号楼'},
          {key: '4-1', value: '4号楼1F'},
          {key: '4-2', value: '4号楼2F'}
        ],
        floorNum: 'yq'
      }
    },
    methods: {
      change(val) {
        switch (val) {
          case 'yq':
            this.mapSrc = 'http://www.cloudlinker.cn/hz-park/map/map-park'
            break
          case '1-1':
            this.mapSrc = 'http://www.cloudlinker.cn/hz-park/map/map-1-1'
            break
          case '1-2':
            this.mapSrc = 'http://www.cloudlinker.cn/hz-park/map/map-1-2'
            break
          case '2':
            this.mapSrc = 'http://www.cloudlinker.cn/hz-park/map/map-2'
            break
          case '3':
            this.mapSrc = 'http://www.cloudlinker.cn/hz-park/map/map-3'
            break
          case '4-1':
            this.mapSrc = 'http://www.cloudlinker.cn/hz-park/map/map-4-1'
            break
          case '4-2':
            this.mapSrc = 'http://www.cloudlinker.cn/hz-park/map/map-4-2'
            break
          default:
            this.mapSrc = 'http://www.cloudlinker.cn/hz-park/map/map-park'
            break
        }
      }
    }
  }
</script>

<style lang="less" scoped>
  #map_container {
    width: 90%;
    height: 400px;
    margin: 0 auto;
  }
</style>
